<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>qq好友列表</title>
        <link rel="stylesheet" type="text/css" href="./source/qq.firendsList.css">
	</head>
	<body>
		<div class="wrap" id="app">
		  <div class="list">
		    <div v-for="item,index in qqList" :class="{active:item.current}">
		    	<h2 @click="item.current=!item.current"><span :class="{active:item.current}"></span>{{item.title}}</h2>
		    	<ul>
		    	  	<li  v-for="item,index in item.list">{{item.subTitle}}</li>
		    	</ul>
		    </div>
		  </div>
		</div>
	</body>
</html>
<script src="../../2.1.8/vue.js"></script>
<script>
	
	var qqList = [{
	    title: '我的好友',
	    current : false,
	    list: [{
	        	subTitle: '张国荣'
	      	},{
	        	subTitle: '周杰伦'
	      	},{
	        	subTitle: '王杰'
	      	}]
	  	},{
	    title: '我的同事',
	    current : false,
	    list: [{
	        	subTitle: '莫莫'
			},{
	        	subTitle: '多多'
			},{
	        	subTitle: 'leo'
	      	}]
	  	}];
	let vm = new Vue({
		el : '#app',
		data : {
			qqList,
		}
	});

	
</script>